<template>
    <view class="content">
		<view class="contentop">
			<view class="contxt">
				<view class="list">
					<view >
						<view class="cplist" @tap="jump('/subcontract/shop/orderdetails')">
							<view>
								<image :src="imgoss+detail.goods.pic" mode="aspectFill" class="zrimg"></image>
								<view>
									<view>{{detail.goods.name}}</view>
									<view>{{detail.order_time}}</view>
									<view>
										<view><span>￥</span>{{detail.goods.money}}</view>
										<view>x{{detail.number}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="conlist">
				<view  class="iptxt2" @tap="show1 = true">
					<view>退款原因<span style="color:red">*</span></view>
					<view>
						<span >{{cur!=9999?list[cur]:'请选择'}}</span>
						<image src="/static/rzicon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="conlist1">
				<view>详细原因</view>
				<view>
					<textarea v-model="info" maxlength="60" placeholder="请输入"></textarea>
					<view>{{info.length}}/60</view>
				</view>
			</view>
			
			<view class="btns">
				<view @tap="orderChancelRefund">取消申请</view>
				<view @tap="orderRefund">提交申请</view>
			</view>
			
			
		</view>
		
		<u-popup v-model="show1" :mask="true" :closeable='true'  mode="bottom" width="100%" border-radius="40" height="auto" @close="onClose">
			<view class="phonecon">
				<view class="txts">退款原因</view>
				
				<view class="zlist">
					<view v-for="(item,index) in list" :key="index" @tap="swidths(index)">
						<view>{{item}}</view>
						<view class="xzimg">
							<image :src="cur==index?'/static/wxicon2.png':'/static/wxicon1.png'" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="btns1">
					<view>取消</view>
					<view>确认</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
			imgoss: app.globalData.imgoss,
            id: 0,
			cur:9999,
			detail:null,
			info:'',
			show1:false,
			list:['计划有变没时间去','买多了/买错了','后悔了,不想要了','担心安全问题','联系不上商家','其他平台更好','其他']
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.id = options.id;
		this.UserorderDes()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		orderRefund(){
			if(this.cur==9999){
				app.globalData.show('请选择退款原因~')
				return true
			}		
			if(this.info==''&&this.cur==6){
				app.globalData.show('请输入详细原因~')
				return true
			}		
			const that =this;
			var url = this.detail.refund_status==3?'User/orderRefundAgain':'User/orderRefund'
			app.globalData.api.request(url, {
				id:this.id,
				refund_reason:this.list[this.cur],
				refund_info:this.info
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					app.globalData.d('已提交申请~')
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		UserorderDes(){
			var that = this;
			app.globalData.api.request('User/orderDes', {
				page:this.page,
				id:this.id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					//console.log(res.data)
					this.detail = res.data
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		// 取消退款
		orderChancelRefund(){
			uni.navigateBack()
			// app.globalData.api.request('User/orderChancelRefund', {
			// 	id:this.id,
			// }, 'POST', 'form').then((res) => {
			// 	if (res.code == 0) {
			// 		app.globalData.d('取消成功~')
			// 	}else{
			// 		app.globalData.show(res.msg)
			// 	}
			// });
		},
		onClose(){
			this.show1 = false
		},
		jump(url){
			uni.navigateTo({
				url:url
			})
		},
		swidths(cur){
			this.cur = cur
			this.show1 = false;
		}
	}
};
</script>
<style>
	
	.btns1>view:nth-child(1){
		width: 50%;
		height: 70rpx;
		float: left;
		text-align: center;
		line-height: 66rpx;
		box-sizing: border-box;
		background-color: rgba(255,255,255,1);
		color: rgba(134,101,175,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
		border-top-left-radius: 5rpx;
		border-bottom-left-radius: 5rpx;
	}
	.btns1>view:nth-child(2){
		width: 50%;
		height: 70rpx;
		float: right;
		text-align: center;
		box-sizing: border-box;
		line-height: 66rpx;
		background-color: rgba(134,101,175,1);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
		border-top-right-radius: 5rpx;
		border-bottom-right-radius: 5rpx;
	}
	.btns1{
		width: 100%;
		height: 70rpx;
		display: table;
		margin: 60rpx auto;
	}
	.zlist>view{
		width: 100%;
		height: auto;
		display: inline-flex;
		justify-content: space-between;
		padding: 20rpx 0px;
		position: relative;
		box-sizing: border-box;
		padding-right: 60rpx;
		border-bottom: 1px solid #EDEDED;
	}
	.zlist>view>view:nth-child(1){
		color: rgb(16,16,16);
		font-size: 26rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.xzimg{
		width: 20px;
		height: 20px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -10px;
	}
	.xzimg>image{
		width: 20px;
		height: 20px;
	}
	.zlist{
		width: 100%;
		height: auto;
		display: table;
	}
	.txts{
		width: 100%;
		height: auto;
		display: table;
		color: rgb(16,16,16);
		font-size: 28rpx;
		text-align: center;
		font-family: SourceHanSansSC-bold;
		line-height: 40px;
	}
	.phonecon{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.iptxt2{
		width: 100%;
		height:80rpx;
		display: inline-flex;
		justify-content: space-between;
	}
	.iptxt2>view:nth-child(1){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		float: left;
		width: auto;
		line-height: 80rpx;
		display: inline-block;
		font-family: PingFangSC-medium;
	}
	.iptxt2>view:nth-child(2){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		width: auto;
		float: right;
		font-family: PingFangSC-medium;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	.iptxt2>view:nth-child(2)>image{
		width: 16px;
		margin-left: 10rpx;
	}
	.btns>view:nth-child(1){
		width: 47%;
		height: 80rpx;
		float: left;
		text-align: center;
		line-height: 76rpx;
		border-radius: 10rpx;
		background-color: rgba(255,255,255,1);
		color: rgba(134,101,175,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
	}
	.btns>view:nth-child(2){
		width: 48%;
		height: 80rpx;
		float: right;
		text-align: center;
		line-height: 76rpx;
		border-radius: 10rpx;
		background-color: rgba(134,101,175,1);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
	}
	.btns{
		width: 600rpx;
		height: 80rpx;
		display: table;
		margin: 60rpx auto;
	}
	.conlist1>view:nth-child(2){
		width: 100%;
		height: 200rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	.conlist1>view:nth-child(2)>textarea{
		width: 100%;
		height: 200rpx;
		border-radius: 10px;
		background-color: rgba(248,248,248,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-family: Roboto;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.conlist1>view:nth-child(2)>view{
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		color: rgb(16,16,16);
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.conlist1>view:nth-child(1){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		width: 100%;
		line-height: 40px;
	}
	.conlist1{
		width: 100%;
		height: auto;
		display: table;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		padding: 0px 24rpx;
		background-color: #fff;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.iptxt>view:nth-child(2)>input{
		width: 300rpx;
		text-align: right;
		font-size: 24rpx;
		color: #333;
	}
	.iptxt>view:nth-child(1){
		width: auto;
		height: 94rpx;
		line-height: 94rpx;
		display: inline-block;
		float: left;
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
	}
	
	.iptxt>view:nth-child(2){
		width: auto;
		height: 94rpx;
		line-height: 94rpx;
		display: inline-flex;
		align-items: center;
		float: right;
	}
	.iptxt1{
		color: rgba(151,151,150,1);
		font-size: 25rpx;
		margin-right: 15rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.iptxt1>image{
		width: 28rpx;
	}
	.conlist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 0px 24rpx;
		background-color: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.conlist>view{
		width: 100%;
		height: 94rpx;
		border-bottom: 1px solid rgba(245,245,245,0.5);
	}
	
	.zrimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left:0rpx;
	}
	.cplist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
	}
	.cplist>view{
		width: 100%;
		min-height: 200rpx;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		padding-left: 180rpx;
		position: relative;
	}
	.cplist>view>view>view:nth-child(3){
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}
	.cplist>view>view>view:nth-child(3)>view:nth-child(1){
		color: rgba(217,104,142,1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(3)>view:nth-child(2){
		color: rgba(209,209,209,1);
		font-size: 24rpx;
		text-align: right;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view{
		width: 100%;
		min-height: 160rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.cplist>view>view>view{
		width: 100%;
		height: auto;
		display: table;
	}
	.cplist>view>view>view:nth-child(1){
		color: rgba(16,16,16,1);
		font-size: 28rpx;
		text-align: left;
		font-weight: bold;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2){
		color: rgba(209,209,209,1);
		font-size: 28rpx;
		text-align: left;
		margin-top: 10rpx;
		line-height: 25px;
		font-family: PingFangSC-regular;
	}
	.cplist>view>view>view:nth-child(2)>span{
		font-size: 24rpx !important;
	}
	.list{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		background-color: #fff;
	}
	.contxt{
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10rpx;
		background-color: #fff;
		padding:0px 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.contentop{
		width: 690rpx;
		height: auto;
		display: table;
		margin-left: 30rpx;
		z-index: 10;
	}
	page{
		background-color: #f6f6f6;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding-bottom: 140rpx;
		padding-top: 20rpx;
	}
</style>
